<template>
    <view>
        <u-popup v-model="show" mode="bottom" border-radius="10">
            <view class="safe-area-inset-bottom">
                <view class="auth">
                    <view class="message">您还没有进行商家认证，将无法使用平台的服务 您可以选择以下任意一种方式进</view>
                    <view id="guide001">
                        <!-- 个人认证 -->
                        <view class="auth-personal" @click="gotoAuth(0)">
                            <view><u-image src="/static/icon/10005.png" width="165" height="165"></u-image></view>
                            <view>
                                <view class="type-name">
                                    <text class="icon">&#xe679;</text>
                                    <text style="margin-left: 10rpx;">社群认证</text>
                                </view>
                                <view class="desc">适用于个人创业者、电商平台博主、主播大V，通过身份证件、银行账户、网店资质等资料进行认证。</view>
                            </view>
                        </view>
                        <!-- 企业认证 -->
                        <view class="auth-company" @click="gotoAuth(1)">
                            <view><u-image src="/static/icon/10004.png" width="165" height="165"></u-image></view>
                            <view>
                                <view class="type-name">
                                    <text class="icon">&#xe679;</text>
                                    <text style="margin-left: 10rpx;">企业认证</text>
                                </view>
                                <view class="desc">适用于企业、个体工商户、事业单位、社会团体等，通过营业执照，法人身份证等相关资质进行认证，大约需要2-3个工作日。</view>
                            </view>
                        </view>
                        <!-- 个体户认证 -->
                        <view class="auth-shop" @click="gotoAuth(2)">
                            <view><u-image src="/static/icon/10003.png" width="165" height="165"></u-image></view>
                            <view>
                                <view class="type-name">
                                    <text class="icon">&#xe679;</text>
                                    <text style="margin-left: 10rpx;">个体商户认证</text>
                                </view>
                                <view class="desc">适用于个体工商户，通过个人身份证、营业执照、银行账户等进行认证,大约需要1-2个工作日。</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emit = defineEmits(['jump'])

const show = ref(false)

const gotoAuth = function(type: number) {
    show.value = false;
    emit('jump', type);
}
const open = function(){
    show.value = true
}

defineExpose({open})
</script>

<style scoped lang="scss">
.auth {
    max-height: 90vh;
    padding: 30rpx;
    .message {
        text-align: center;
        font-size: 28rpx;
        line-height: 60rpx;
        padding: 20rpx;
        font-weight: bold;
    }
    .auth-personal {
        background-color: #fef7ed;
        display: flex;
        padding: 30rpx;
        color: #fe9a00;
        border-radius: 10rpx;
        .type-name {
            text-align: center;
            font-weight: bold;
        }
        .desc {
            margin-left: 20rpx;
            color: #333333;
            padding-top: 20rpx;
            font-size: 26rpx;
        }
    }
    .auth-company {
        @extend .auth-personal;
        margin-top: 20rpx;
        background-color: #f1f7ff;
        color: #1679ff;
    }
    .auth-shop {
        @extend .auth-personal;
        margin-top: 20rpx;
        background-color: #fff3f3;
        color: #ff2442;
    }
}
</style>
